이미지 비율 유지하기

aspect-ratio

• 가로, 세로에 대한 이미지 비율을 설정

img {
  width: 300px;
  /* 사진의 가로 길이 설정 */
  aspect-ratio: 2 / 1;
  /* 세로 / 가로 에 대한 비율 설정 */
  object-fit: cover;
  /* object-fit으로 사진의 보여주는 크기를 설정
  contain은 이미지가 찌글어지지 않게 비율에 맞게 조절하여 삽입한다.
  cover은 원본 사진의 크기는 유지하며, 설정한 값에 따라 이미지가 잘린다.
  이미지의 설정의 크기보다 가져올 이미지의 크기가 작다면 설정값에 맞게 출력.
  */
}

padding %값

.thumbnail {
  position: relative;
  height: 0;
  padding-top: 50%;
  overflow: hidden;
}

.thumbnail img {
  position: absolute;
  top: 0;
  left: 0;
  /* top, left, right, bottom으로 좌표 값을 설정 
  top과 bottom은 부모의 세로가 아닌, 가로 너비를 기준*/
  width: 100%;
  height: 100%;
  /* 이미지의 크기를 %로 조정한다. */
  object-fit: cover;
}